import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '增强版计数器',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.system,
      home: const MyHomePage(title: '增强版计数器'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  int _counter = 0;
  bool _isDarkMode = false;
  late AnimationController _animationController;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0, end: 1).animate(
      CurvedAnimation(parent: _animationController, curve: Curves.elasticOut),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
      _animationController.forward(from: 0);
    });
  }

  void _decrementCounter() {
    setState(() {
      if (_counter > 0) _counter--;
      _animationController.reverse(from: 1);
    });
  }

  void _resetCounter() {
    setState(() {
      _counter = 0;
      _animationController.reset();
    });
  }

  void _toggleTheme() {
    setState(() {
      _isDarkMode = !_isDarkMode;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(
            icon: Icon(_isDarkMode ? Icons.light_mode : Icons.dark_mode),
            onPressed: _toggleTheme,
            tooltip: '切换主题',
          ),
        ],
      ),
      body: Theme(
        data: _isDarkMode ? ThemeData.dark() : ThemeData.light(),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 1. 使用AnimatedSwitcher实现数字切换动画
              AnimatedSwitcher(
                duration: const Duration(milliseconds: 300),
                transitionBuilder: (Widget child, Animation<double> animation) {
                  return ScaleTransition(scale: animation, child: child);
                },
                child: Text(
                  '$_counter',
                  key: ValueKey<int>(_counter),
                  style: Theme.of(context).textTheme.displayMedium?.copyWith(
                    color: _counter % 2 == 0 ? Colors.blue : Colors.green,
                  ),
                ),
              ),
              const SizedBox(height: 20),
              
              // 2. 使用LinearProgressIndicator显示进度
              LinearProgressIndicator(
                value: _counter / 100,
                backgroundColor: Colors.grey[300],
                valueColor: AlwaysStoppedAnimation<Color>(
                  _counter > 50 ? Colors.red : Colors.green,
                ),
              ),
              const SizedBox(height: 10),
              Text(
                '进度: ${(_counter / 100 * 100).toStringAsFixed(0)}%',
                style: Theme.of(context).textTheme.bodyMedium,
              ),
              const SizedBox(height: 30),
              
              // 3. 使用Wrap实现多个操作按钮
              Wrap(
                spacing: 10,
                runSpacing: 10,
                alignment: WrapAlignment.center,
                children: [
                  FloatingActionButton(
                    heroTag: 'increment',
                    onPressed: _incrementCounter,
                    tooltip: '增加',
                    child: const Icon(Icons.add),
                  ),
                  FloatingActionButton(
                    heroTag: 'decrement',
                    onPressed: _decrementCounter,
                    tooltip: '减少',
                    child: const Icon(Icons.remove),
                  ),
                  FloatingActionButton(
                    heroTag: 'reset',
                    onPressed: _resetCounter,
                    tooltip: '重置',
                    child: const Icon(Icons.refresh),
                  ),
                ],
              ),
              const SizedBox(height: 20),
              
              // 4. 使用Slider控制计数器值
              Slider(
                value: _counter.toDouble(),
                min: 0,
                max: 100,
                divisions: 100,
                label: _counter.round().toString(),
                onChanged: (double value) {
                  setState(() {
                    _counter = value.toInt();
                  });
                },
              ),
              
              // 5. 使用Card显示额外信息
              Card(
                margin: const EdgeInsets.all(20),
                child: Padding(
                  padding: const EdgeInsets.all(16),
                  child: Column(
                    children: [
                      const Text('计数器信息'),
                      const Divider(),
                      Text('当前值: $_counter'),
                      Text('奇偶性: ${_counter % 2 == 0 ? '偶数' : '奇数'}'),
                      Text('平方值: ${_counter * _counter}'),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}